<style include="settings-shared iron-flex">
  :host {
    --icon-width: 40px;
  }

  .sync-row {
    align-items: center;
    flex: auto;
  }

  #profile-icon {
    background: center / cover no-repeat;
    border-radius: 20px;
    flex-shrink: 0;
    height: 40px;
    width: 40px;
  }

  #sync-setup {
    --cr-secondary-text-color: var(--cros-text-color-alert);
  }

  cr-link-row {
    --cr-link-row-icon-width: var(--icon-width);
    border-top: var(--cr-separator-line);
  }

  settings-parental-controls-page {
    --cr-link-row-icon-width: var(--icon-width);
  }

  .icon-container {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    width: 40px;
  }
</style>
<settings-animated-pages id="pages" section="osPeople"
    focus-config="[[focusConfig_]]">
  <div route-path="default">
    <div class="settings-box first two-line">
      <template is="dom-if" if="[[syncStatus]]">
        <!-- Does not use <cr-link-row> due to custom aria label. -->
        <div id="profile-icon"
            style="background-image: [[getIconImageSet_(profileIconUrl_)]]"
            on-click="onAccountManagerTap_"
            actionable$="[[isAccountManagerEnabled_]]">
        </div>
        <div class="middle two-line no-min-width"
            id="profile-row"
            on-click="onAccountManagerTap_"
            actionable$="[[isAccountManagerEnabled_]]">
          <div class="flex text-elide settings-box-text">
            <span id="profile-name" aria-hidden="true">
              [[getProfileName_(profileName_)]]
            </span>
            <div id="profile-label" class="secondary"
                aria-hidden="true">
              [[profileLabel_]]
            </div>
          </div>
          <cr-icon-button class="subpage-arrow"
              hidden="[[!isAccountManagerEnabled_]]"
              id="account-manager-subpage-trigger"
              aria-label="$i18n{accountManagerSubMenuLabel}"
              aria-describedby="profile-name profile-label"
              aria-roledescription="$i18n{subpageArrowRoleDescription}">
          </cr-icon-button>
        </div>
      </template>
    </div>
    <cr-link-row id="sync-setup"
        start-icon="cr:sync"
        label="$i18n{syncAndNonPersonalizedServices}"
        sub-label="[[getSyncAndGoogleServicesSubtext_(syncStatus)]]"
        on-click="onSyncTap_"
        role-description="$i18n{subpageArrowRoleDescription}">
    </cr-link-row>
    <template is="dom-if" if="[[showParentalControls_]]">
      <settings-parental-controls-page>
      </settings-parental-controls-page>
    </template>
  </div>
  <template is="dom-if" route-path="/syncSetup">
    <settings-subpage
        page-title="$i18n{syncPageTitle}"
        learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
      <settings-sync-page
          sync-status="[[syncStatus]]" prefs="{{prefs}}"
          page-visibility="[[pageVisibility.privacy]]"
          focus-config="[[focusConfig_]]">
      </settings-sync-page>
    </settings-subpage>
  </template>
  <!-- Pre-SyncSettingsCategorization we show the browser's sync controls.
  -->
  <template is="dom-if" if="[[!syncSettingsCategorizationEnabled_]]">
    <template is="dom-if" route-path="/syncSetup/advanced">
      <settings-subpage page-title="$i18n{syncAdvancedPageTitle}"
          learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
        <settings-sync-controls sync-status="[[syncStatus]]">
        </settings-sync-controls>
      </settings-subpage>
    </template>
  </template>
  <!-- Post-SyncSettingsCategorization we have separate OS sync controls.
  -->
  <template is="dom-if" if="[[syncSettingsCategorizationEnabled_]]">
    <template is="dom-if" route-path="/osSync">
      <settings-subpage page-title="$i18n{syncAndNonPersonalizedServices}"
          learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
        <os-sync-controls sync-status="[[syncStatus]]"
            profile-icon-url="[[profileIconUrl_]]"
            profile-name="[[profileName_]]"
            profile-email="[[profileEmail_]]">
        </os-sync-controls>
      </settings-subpage>
    </template>
  </template>
  <template is="dom-if" route-path="/accountManager">
    <settings-subpage page-title="$i18n{accountManagerPageTitle}">
      <settings-account-manager prefs="[[prefs]]">
      </settings-account-manager>
    </settings-subpage>
  </template>
</settings-animated-pages>
<template is="dom-if" if="[[showSignoutDialog_]]" restamp>
  <settings-signout-dialog sync-status="[[syncStatus]]"
      on-close="onDisconnectDialogClosed_">
  </settings-signout-dialog>
</template>
